<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Data Selfie _ Me</title>
    <style>
    body {
        background-color: #000
    }
    </style>
</head>

<body>
    <header id="user">
        <div class="info">
            <div>$ Data Selfie _ <a href="">_</a></div>
            <div id="summary-text-row" class="info-row" style="display: none">
                <div class="info-label">$ Summary _____ </div>
                <div class="info-content"><span id="summary-text">_</span></div>
            </div>
            <div id="social-share" style="display: none"><span style="color: #000">_______________</span> <a href="" target="_blank" id="fbshare">Share via Facebook</a> or <a href="" target="_blank" id="twshare">Twitter</a></div>
            <div>$ Online ______ <span id="last-session">_</span></div>
            <div>$ Total _______ <span id="total-time-spent">_</span></div>
            <div id="legend" class="info-row">
                <div class="info-label">$ Legend ______</div>
                <div class="info-content">
                    <div class="looked-text tool-tip" data-tooltip="content from your newsfeed that you look at (e.g. >5sec, see options)">looked</div> _
                    <div class="clicked-like-text tool-tip" data-tooltip="posts you liked from your newsfeed">liked</div> _
                    <div class="clicked-external-text tool-tip" data-tooltip="links you clicked from your newsfeed">link clicked</div> _
                    <div class="typed-text tool-tip" data-tooltip="anything you typed e.g. comments, private messages etc.">typed</div>
                </div>
            </div>
        </div>
        <div id="status">
            <img></img>
        </div>
    </header>
    <div id="main">
        <div id="progressAnim"></div>
        <div id="init-message" style="display: none">Your local database is empty.
            <br>You have to use Facebook (after installation) in this browser to see your analyzed and predicted data.
            <br>
            <br>If you have done so, but the seconds counter for how long you look at various posts (see <a href="http://vimeo.com/d4t4x/dataselfie" target="_blank">demo video</a>) is not shown in the bottom left, then your browser/Facebook account might not be compatible with Data Selfie. Check out <a href="http://dataselfie.it/faq" target="_blank"> our FAQs</a>, <a href="https://vimeo.com/album/4796949" target="_blank">support videos</a> or <a href="https://github.com/d4t4x/data-selfie/issues/" target="_blank">github issues</a> for possible solutions or hacks or how you might be able to contribute, so this problem can be solved. Really very sorry for this inconvenience!
            <br>
            <br>Visit <a href="http://dataselfie.it/faq" target="_blank">FAQ + Terms of Use</a> for more information.
            <br>Consider helping us improve the open source code on <a href="https://github.com/d4t4x/data-selfie" target="_blank">github</a>.</div>
        <div id="the-cool-stuff">
            <ul class="wrapper col-1">
                <li>
                    <div class="container" id="activity-container">
                        <div class="container-title">Activity</div>
                        <div class="content">
                            <div id="consumption-vis"></div>
                            <div id="shift-time">
                                <div class="update-activity" id="prev-day">&lt;</div>
                                <input id="days-increment" type="hidden" value="1">
                                <div class="update-activity" id="next-day">&gt;</div>
                            </div>
                            <p class="last-updated">updated: <span>now</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="wrapper col-3" id="top-wrapper">
                <li>
                    <div class="container" id="top-user-container">
                        <div class="container-title">Top friends <span></span></div>
                        <div class="content" id="top-user">
                            <p>Time spent (in sec) on friends' posts</p>
                            <p class="last-updated">updated: <span>now</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="top-page-container">
                        <div class="container-title">Top pages <span></span></div>
                        <div class="content" id="top-page">
                            <p>Time spent (in sec) on pages' posts</p>
                            <p class="last-updated">updated: <span>now</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="top-like-container">
                        <div class="container-title">Top Likes <span></span></div>
                        <div class="content" id="top-like">
                            <p>Likes for posts, photos or videos</p>
                            <p class="last-updated">updated: <span>now</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <div id="funnel">
                <div></div>
            </div>
            <div id="loading" style="display: none">Loading...</div>
            <div id="usage-message">
                <div id="server-err" style="display: none"><span class="warning">attention:</span> Server error, please refresh page or try again at another time.</div>
                <div id="not-enough" style="display: none"><span class="warning">attention:</span> Not enough data yet. There is not enough consumption. You need to scroll through your feed, consider typing more (e.g. commenting or private messages), so Data Selfie can make predictions. The more time you spend on Facebook the faster you will get your predictions.</div>
            </div>
        </div>
        <div id="the-good-stuff">
            <ul class="wrapper col-1">

            </ul>
            <ul class="wrapper col-2" id="alchemy-wrapper">
                <li>
                    <div class="container" id="yolo-container">
                        <div class="container-title">Object Detection</div>
                        <div class="tech-label" data-tooltip="Open source machine learning algorithm for object detection called YOLO was used to generate this analysis (check github).">ML</div>
                        <div class="content yolo-content" id="yolo-pred">
                            <p>From the <span id="valid-imgs"></span>images <span id="total-urls"></span>in your feed that you have looked at, image urls can expire or the algorithm simply can't recognize any object (image becomes invalid) <span id="img-pred-threshold"></span>, one image can have multiple objects</p>
                            <p class="error"></p>
                            <p id="still-loading">Still analyzing... don't close window.</p>
                            <p class="last-updated yolo-last">updated: <span>-</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="entities-container">
                        <div class="container-title">Entities</div>
                        <div class="tech-label" data-tooltip="Natural Language Processing from IBM Watson was used to generate this analysis.">NLP</div>
                        <div class="content alchemy-content" id="">
                            <p>Relevance (0 to 1) and sentiment (-1 to 1 / negative to positive) of people, organizations, places, a.o. mentioned in the recent content you have looked at<br><br></p>
                            <p class="error"></p>
                            <div class="Rtable Rtable--4cols-s-s-m"></div>
                            <p class="last-updated alchemy-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="wrapper col-1-3" id="alchemy-ocean-wrapper">
                <li>
                    <div class="container" id="categories-container">
                        <div class="container-title">Categories</div>
                        <div class="tech-label" data-tooltip="Natural Language Processing from IBM Watson was used to generate this analysis.">NLP</div>
                        <div class="content alchemy-content" id="">
                            <p>Relevance (0 to 1) of general categories from recent content that you have looked at, they aren’t necessarily directly referenced</p>
                            <p class="error"></p>
                            <div class="Rtable Rtable--2cols"></div>
                            <p class="last-updated alchemy-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="ocean-container">
                        <div class="container-title">Personality Prediction</div>
                        <div class="tech-label" data-tooltip="Machine Learning from IBM and the University of Cambridge was used to generate this analysis.">ML</div>
                        <div class="content applymagicsauce-content" id="">
                            <p>What you type and the facebook pages you see in your feed result in this prediction of your Big 5, E.g. 20th percentile means 20% of general population has lower and 80% has higher score</p>
                            <p class="error"></p>
                            <div id="ocean-vis"></div>
                            <p class="last-updated applymagicsauce-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="wrapper col-2-2-1" id="religion-politics-wrapper">
                <li>
                    <div class="container" id="religion-container">
                        <div class="container-title">Religious Orientation</div>
                        <div class="tech-label" data-tooltip="Machine Learning API from the University of Cambridge was used to generate this analysis.">ML</div>
                        <div class="content applymagicsauce-content" id="">
                            <p style="min-height: 50px;">The pages you see in your feed suggest this, "None" includes atheists, agnostics, pastafarians and jedi. "Christian Other" includes several christian denominations</p>
                            <p class="error"></p>
                            <ul id="religion-chart"></ul>
                            <p class="last-updated applymagicsauce-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="politics-container">
                        <div class="container-title">Political Orientation</div>
                        <div class="tech-label" data-tooltip="Machine Learning API from the University of Cambridge was used to generate this analysis.">ML</div>
                        <div class="content applymagicsauce-content" id="">
                            <p style="min-height: 50px;">The pages you see in your feed suggest this</p>
                            <p class="error"></p>
                            <ul id="politics-chart"></ul>
                            <p class="last-updated applymagicsauce-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="other-predictions-container">
                        <div class="container-title">Other Predictions</div>
                        <div class="tech-label" data-tooltip="Machine Learning API from the University of Cambridge was used to generate this analysis.">ML</div>
                        <div class="content applymagicsauce-content" id="">
                            <p>Based on pages in your feed, the percentile is in relation to the general population</p>
                            <p class="error"></p>
                            <div class="Rtable Rtable--2cols-m"></div>
                            <p class="last-updated applymagicsauce-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="wrapper col-2" id="consumption-pref-wrapper">
                <li>
                    <div class="container" id="shopping-container">
                        <div class="container-title">Shopping Preferences</div>
                        <div class="tech-label" data-tooltip="Machine Learning algorithm from IBM was used to generate this analysis.">ML</div>
                        <div class="content personality-content" id="">
                            <p>Based on what you type your personality (Big 5), values and needs are predicted and these preferences can be produced</p>
                            <p class="error"></p>
                            <div class="Rtable Rtable--2cols-l"></div>
                            <p class="last-updated personality-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="container" id="health-container">
                        <div class="container-title">Health + Activity + Other Preferences</div>
                        <div class="tech-label" data-tooltip="Machine Learning algorithm from IBM was used to generate this analysis.">ML</div>
                        <div class="content personality-content" id="">
                            <p>Based on what you type your personality (Big 5), values and needs are predicted and these preferences can be produced</p>
                            <p class="error"></p>
                            <div class="Rtable Rtable--2cols-l"></div>
                            <p class="last-updated personality-last">updated: <span>- (not enough data)</span></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <footer>
        <div id="legend">$ Legend ______
            <div class="looked-text tool-tip" data-tooltip="content from your newsfeed that you look at (e.g. >5sec, see options)">looked</div> _
            <div class="clicked-like-text tool-tip" data-tooltip="posts you liked from your newsfeed">liked</div> _
            <div class="clicked-external-text tool-tip" data-tooltip="links you clicked from your newsfeed">link clicked</div> _
            <div class="typed-text tool-tip" data-tooltip="anything you typed e.g. comments, private messages etc.">typed</div>
        </div>
        <br>
        <p>Tool tips via hover throughout the page.</p>
        <p>Visit <a href="http://dataselfie.it/faq" target="_blank">FAQ + Terms of Use</a> for more info.</p>
        <p>Email us at support@dataselfie.it.</p>
    </footer>
    <script src="../js/me.js"></script>
</body>

</html>